<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="16" :sm="12">
            <a-form-item label="模型名称" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-select placeholder="请选择模型" v-model="currentSelectedModelId" :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }" @change="currentSelectedModelChange">
                <a-select-option v-for="item in modelData" :key="item.id" :value="item.id">{{ item.topicName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-button type="primary" :disabled="!currentRelatedModelId" @click="reshRelatedModel">刷新指标</a-button>
            <a-button type="primary" style="margin-left: 8px;" :disabled="!currentRelatedModelId" @click="relateModel">保存</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <h1>指标信息：</h1>
    <j-editable-table
      ref="table"
      :loading="loading"
      :columns="columns"
      :dataSource="tableData"
      :dragSort="true"
      :rowNumber="true"
      :maxHeight="450"
      :disabledRows="{ dbFieldName:'id'}" />
  </a-card>
</template>

<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
import { getAction, putAction } from '@/api/manage'

export default {
  name: 'EvaluationSystemRelateModelTableInfo',
  props: {
    evalId: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      modelData: [],
      loading: false,
      tableData: [],
      currentRelatedModelId: undefined,
      currentSelectedModelId: undefined,
      columns: [
        {
          title: '指标名称',
          key: 'name',
          width: '150px',
          props: {
            style: 'display: block; max-width: 131px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;'
          }
        },
        {
          title: '显示名称',
          key: 'showName',
          width: '150px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}'
        },
        {
          title: '汇聚方式',
          key: 'groupType',
          width: '150px',
          type: FormTypes.select,
          options: [],
          dictCode: 'index_group_type',
          defaultValue: '',
          placeholder: '请选择${title}'
        },
        {
          title: '备注',
          key: 'remark',
          width: '150px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}'
        },
        {
          title: '单位',
          key: 'unit',
          width: '90px'
        },
        {
          title: '数据类型',
          key: 'dataType_dictText',
          width: '100px',
          defaultValue: '-'
        },
        {
          title: '数据长度',
          key: 'columnLength',
          width: '90px'
        },
        {
          title: '小数精度',
          key: 'scale',
          width: '90px',
          defaultValue: '-'
        },
        {
          title: '是否显示',
          key: 'status',
          width: '90px',
          type: FormTypes.checkbox,
          customValue: [1, 0]
        }
      ],
      url: {
        getModelData: '/eval/scSituationEval/getTopic',
        getTableData: '/eval/scSituationEvalIndexCols/listByTopicId',
        save: '/eval/scSituationEvalIndexCols/addBatch'
      }
    }
  },
  watch: {
    evalId() {
      this.getModelData()
    }
  },
  created() {
    this.getModelData()
  },
  methods: {
    getModelData() {
      getAction(this.url.getModelData, { id: this.evalId }).then((res) => {
        if (res.success) {
          this.modelData = res.result
          if (this.modelData.length) {
            this.currentRelatedModelId = this.currentSelectedModelId = this.modelData[0].id
            this.getTableData()
          } else {
            this.currentRelatedModelId = this.currentSelectedModelId = undefined
            this.tableData = []
          }
        } else {
          this.currentRelatedModelId = this.currentSelectedModelId = undefined
          this.tableData = []
        }
      })
    },
    getTableData(hasRelateId = true) {
      const param = {
        evalId: this.evalId,
        topicId: hasRelateId ? this.currentRelatedModelId : this.currentSelectedModelId
      }
      this.loading = true
      getAction(this.url.getTableData, param).then((res) => {
        if (res.success) {
          this.tableData = res.result
        }
        this.loading = false
      })
    },
    currentSelectedModelChange(value) {
      this.currentSelectedModelId = value
      this.getTableData(false)
    },
    reshRelatedModel() {
      this.currentSelectedModelId = this.currentRelatedModelId
      this.getTableData()
    },
    relateModel() {
      const tableData = this.$refs.table.getValuesSync({ validate: false })
      const params = tableData.values.map(item => {
        item.relTopicId = this.currentSelectedModelId
        item.evalId = this.evalId
        item.relIndexId = item.id
        item.id = ''
        return item
      })
      putAction(this.url.save, params).then((res) => {
        if (res.success) {
          this.$message.success('保存成功!')
          this.getModelData()
        }
      })
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
::v-deep .input-table .thead .td {
  padding: 8px 0px;
}
</style>
